<template>
	<view
		class="tui-checkbox__input"
		:class="{ 'tui-checkbox__disabled': disabled }"
		:style="{
			backgroundColor: getBackgroundStyle(checkedVal, isCheckMark),
			border: getBorderStyle(checkedVal, isCheckMark),
			zoom: nvue ? 1 : scaleRatio,
			transform: `scale(${nvue ? scaleRatio : 1})`
		}"
		@tap.stop="checkboxChange"
	>
		<view v-if="checkedVal" class="tui-check__mark" :style="{ borderBottomColor: checkMarkColor, borderRightColor: checkMarkColor }"></view>
		<checkbox class="tui-checkbox__hidden" :color="color" :disabled="disabled" :value="value" :checked="checkedVal"></checkbox>
	</view>
</template>

<script setup>
import { ref, watch, getCurrentInstance, onBeforeMount } from 'vue'

const { ctx } = getCurrentInstance()

const emit = defineEmits(['change'])

const props = defineProps({
	value: {
		type: String,
		default: ''
	},
	checked: {
		type: Boolean,
		default: false
	},
	disabled: {
		type: Boolean,
		default: false
	},
	//checkbox选中背景颜色
	color: {
		type: String,
		default: '#5677fc'
	},
	//checkbox未选中时边框颜色
	borderColor: {
		type: String,
		default: '#ccc'
	},
	//是否只展示对号，无边框背景
	isCheckMark: {
		type: Boolean,
		default: false
	},
	//对号颜色
	checkMarkColor: {
		type: String,
		default: '#fff'
	},
	scaleRatio: {
		type: [Number, String],
		default: 1
	}
})

let nvue = ref(false)
// #ifdef APP-NVUE
nvue.value = true
// #endif

let checkedVal = ref(false)
let group = false
let label = false

watch(
	() => props.checked,
	nVal => {
		checkedVal.value = nVal
	}
)

watch(checkedVal, nVal => {
	if (group) {
		group.changeValue(checkedVal.value, ctx)
	}
})

onBeforeMount(() => {
	checkedVal.value = props.checked
	group = getParent()
	if (group) {
		group.childrens.push(ctx)
		if (group.modelValue && group.modelValue.length > 0) {
			checkedVal.value = group.modelValue.includes(props.value)
		}
	}
	label = getParent('i-label')
	if (label) {
		label.childrens.push(ctx)
	}
})

const getParent = (name = 'i-checkbox-group') => {
	let parent = ctx.$parent
	let parentName = parent.$options.name
	while (parentName !== name) {
		parent = parent.$parent
		if (!parent) return false
		parentName = parent.$options.name
	}
	return parent
}

const getBackgroundStyle = (val, isCheckMark) => {
	let color = val ? props.color : '#fff'
	if (isCheckMark) {
		color = 'transparent'
	}
	return color
}

const getBorderStyle = (val, isCheckMark) => {
	let color = val ? props.color : props.borderColor
	if (isCheckMark) {
		color = 'transparent'
	}
	return `1px solid ${color}`
}

const checkboxChange = e => {
	if (props.disabled) return
	checkedVal.value = !checkedVal.value
	emit('change', {
		checked: checkedVal.value,
		value: props.value
	})
}

const labelClick = () => {
	checkboxChange()
}

// defineExpose({
// 	labelClick
// })
</script>

<style lang="scss" scoped>
.tui-checkbox__input {
	font-size: 0;
	color: rgba(0, 0, 0, 0);
	width: 40rpx;
	height: 40rpx;
	border-width: 1px;
	border-style: solid;
	/* #ifdef APP-NVUE */
	border-radius: 40rpx;
	/* #endif */
	/* #ifndef APP-NVUE */
	display: inline-flex;
	box-sizing: border-box;
	border-radius: 50%;
	vertical-align: top;
	flex-shrink: 0;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

.tui-check__mark {
	width: 20rpx;
	height: 40rpx;
	border-bottom-style: solid;
	border-bottom-width: 3px;
	border-bottom-color: #ffffff;
	border-right-style: solid;
	border-right-width: 3px;
	border-right-color: #ffffff;
	transform: rotate(45deg) scale(0.5);
	transform-origin: 54% 48%;
	/* #ifndef APP-NVUE */
	box-sizing: border-box;
	/* #endif */
}

.tui-checkbox__hidden {
	/* #ifndef APP-NVUE */
	display: inline-block;
	width: 100%;
	height: 100%;
	border: 0 none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* #endif */
	/* #ifdef APP-NVUE */
	width: 100wx;
	height: 100wx;
	border-width: 0;
	/* #endif */
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	z-index: 2;
}

.tui-checkbox__disabled {
	opacity: 0.6;
}
</style>
